<template>
	<view>
		<view>
			<!-- 搜索条件 -->
			<u-sticky>
				<view class="search">
					<view style="padding: 20rpx;width: 250rpx;">
						<u-picker :show="show" :columns="columns" @cancel="show=false" @confirm="changeStatus">
						</u-picker>
						<u-button plain type="info" shape="circle" :text="statusHint" @click="show=true" icon="order">
						</u-button>
					</view>
					<view style="padding: 20rpx;width: 410rpx;">
						<u-calendar :show="dateShow" mode="range" @confirm="changeDate" @close="closeDate" showLunar
							:maxDate="maxDate" :minDate="minDate" monthNum="12">
						</u-calendar>
						<u-button @click="dateShow = true" shape="circle" plain type="info" :text="dateHint"
							icon="calendar">
						</u-button>
					</view>
				</view>
				<view class="search">
					<view style="padding: 20rpx;width: 410rpx;">
						<u--input placeholder="订单号查找" border="surround" v-model="params.orderNum" @change="change"
							shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #dddee0;"
							clearable>
						</u--input>
					</view>

					<view style="padding: 10px;width: 250rpx;">
						<u-button type="primary" shape="circle" text="搜 索 订 单" @click="search"></u-button>
					</view>
				</view>
			</u-sticky>
		</view>

		<!-- 表格 -->
		<view class="tableBox">
			<uni-table emptyText="暂无更多数据" border="true" :loading="loading">
				<uni-tr>
					<uni-th align="center">订单号</uni-th>
					<uni-th align="center" width="130rpx">状态</uni-th>
					<uni-th align="center">发货方式</uni-th>
					<uni-th align="center">下单时间</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>

				<uni-tr v-for="(item,index) in list">
					<uni-td align="center">
						<view class="orderNum">
							<view v-if="item.afterSaleStatus==1" class="refunTag">
								<u-tag text="退款单" type="warning" icon="car-fill" size="mini"></u-tag>
							</view>
							<view>
								{{item.orderNum}}
							</view>
						</view>
					</uni-td>
					<uni-td align="center">
						<rich-text v-html="getStatus(item.status)"></rich-text>
					</uni-td>
					<uni-td align="center">{{item.type==0?"自提":item.type==1?"快递":"配送"}}</uni-td>
					<uni-td align="center">{{getTime(item.createTime)}}</uni-td>
					<uni-td align="center">
						<u-button type="primary" text="订单详情" size="small" @click="goPage(item.orderNum)"></u-button>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<!-- 分页 -->
		<view>
			<page-pagination :total="params.total" :pageSize="params.pageSize" :showAround="true" :btnText="true"
				:forceEllipses="true" @change="getList"></page-pagination>
		</view>
	</view>
</template>

<script>
	import SOtime from '@/js_sdk/fl-SOtime/SOtime.js'
	export default {
		data() {
			return {
				list: [],
				loading: true,
				token: "",
				dateShow: false,
				show: false,
				params: {
					//总记录数
					total: 0,
					//每页多少条	
					pageSize: 10,
					orderNum: "",
					status: "",
					startTime: "",
					endTime: ""
				},
				statusHint: "订单状态筛选",
				dateHint: "日期范围筛选",
				columns: [
					['待支付', '待发货', '待收货', '待提货', '已提货', '待评价', '已完成', '已取消', '已退款', '全部']
				],
				dateList: [],
				maxDate: "",
				minDate: ""
			}
		},
		onLoad() {
			this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
			this.token = uni.getStorageSync("merchantsToken").token
			this.defaultDate()
			this.search()
		},
		methods: {
			getList(e) {
				this.loading = true
				this.$axios({
					url: "/merchant/merchantGroupGoods/orderList",
					method: "post",
					data: {
						pageNo: e,
						pageSize: this.params.pageSize,
						orderNum: this.params.orderNum,
						status: this.params.status,
						startTime: this.params.startTime,
						endTime: this.params.endTime
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then((res) => {
					//请求接口成功之后，判断加载状态，处理数据
					this.list = res.result.list
					this.params.total = res.result.total
					this.loading = false
				})
			},
			search() {
				this.getList(1);
			},
			goPage(id) {
				uni.navigateTo({
					url: './orderDetail?id=' + id
				})
			},
			//设置默认最早时间和默认最晚时间
			defaultDate() {
				const d = new Date()
				const year = d.getFullYear()
				this.minDate = year + "-01-01"
				this.maxDate = year + "-12-31"
			},
			//选择日期
			changeDate(e) {
				this.dateHint = e[0] + "-" + e[e.length - 1]
				this.params.startTime = e[0] + " 00:00:00"
				this.params.endTime = e[e.length - 1] + " 23:59:59"
				this.dateShow = false
			},
			closeDate(e) {
				this.params.startTime = ""
				this.params.endTime = ""
				this.dateShow = false
				this.dateHint = "选择日期范围"
			},
			//选择订单状态
			changeStatus(e) {
				this.params.status = e.indexs
				if (e.indexs == 7) {
					this.params.status = -1
				}
				if (e.indexs == 8) {
					this.params.status = -2
				}
				if (e.indexs == 9) {
					this.params.status = ""
				}
				this.statusHint = this.columns[0][e.indexs]
				this.show = false
			},
			getStatus(status) {
				switch (status) {
					/* 
					 0：待支付
					 1：待发货
					 2：待收货
					 3：待提货
					 4：已提货，商家已核验
					 5：待评价
					 6：已完成
					 -1：已取消
					 */
					case 0:
						return "<font style='color: #6b6a70'>待支付</font>"
					case 1:
						return "<font style='color: #409eff'>待发货</font>"
					case 2:
						return "<font style='color: #e1b919'>待收货</font>"
					case 3:
						return "<font style='color: #3daa3d'>待提货</font>"
					case 4:
						return "<font style='color: #67c23a'>已提货，商家已核验</font>"
					case 5:
						return "<font style='color: #55007f'>待评价</font>"
					case 6:
						return "<font style='color: #67c23a'>已完成</font>"
					case -1:
						return "<font style='color: red'>已取消</font>"
					case -2:
						return "<font style='color: #ea8716'>已退款</font>"
				}
			},
			getTime(time) {
				return SOtime.time3(time);
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.search {
		display: flex;

		.date {
			font-size: 25rpx;
			color: #c3c3c3;
		}
	}

	.tableBox {
		border-left: none;
		margin: 30rpx;
		border-style: solid;
		color: #2d2d2d0d;
		border-width: 5rpx;
		border-top: none;
		border-bottom: none;

		.uni-table-th {
			background-color: #f5f7fa;
			color: #909399;
		}

		.uni-table--loader {
			left: -250rpx;
			border: 9px solid #165eff;
		}

		.orderNum {
			display: flex;
			justify-content: space-around;
			position: relative;

			.refunTag {
				bottom: 35rpx;
				position: absolute;
				left: 0rpx;
			}
		}
	}
</style>
